<template>
  <div class="sidebar">
    <!-- 快速访问 -->
    <div class="sidebar-section">
      <div class="section-title">
        <el-icon><Star /></el-icon>
        <span>快速访问</span>
      </div>
      <div
        v-for="item in quickAccessData"
        :key="item.path"
        class="sidebar-item"
        :class="{
          active: fileStore.currentPath === item.path,
        }"
        @click="fileStore.navigate(item.path)"
      >
        <el-icon>
          <component :is="getIconComponent(item.icon)" />
        </el-icon>
        <span class="sidebar-text">{{ item.name }}</span>
      </div>
    </div>

    <!-- 此电脑 -->
    <div class="sidebar-section">
      <div class="section-title">
        <el-icon><HomeFilled /></el-icon>
        <span>此电脑</span>
      </div>
      <div
        v-for="drive in driveData"
        :key="drive.path"
        class="sidebar-item"
        :class="{
          active: fileStore.currentPath === drive.path,
        }"
        @click="fileStore.navigate(drive.path)"
      >
        <el-icon>
          <component :is="getIconComponent(drive.icon)" />
        </el-icon>
        <span class="sidebar-text">{{ drive.name }}</span>
        <span class="drive-info">{{ drive.size }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  Star,
  Monitor,
  HomeFilled,
  Folder,
  Document,
  Picture,
  VideoPlay,
  Headset,
  Download,
  Files,
  Coin,
} from "@element-plus/icons-vue";
import { useFileStore } from "../stores/fileStore";
import { quickAccessData, driveData } from "../data/navigationData";

const fileStore = useFileStore();

// 图标映射
const iconMap = {
  Star,
  Monitor,
  HomeFilled,
  Folder,
  Document,
  Picture,
  VideoPlay,
  Headset,
  Download,
  Files,
  Coin,
};

const getIconComponent = (iconName: string) => {
  return iconMap[iconName as keyof typeof iconMap] || Folder;
};
</script>

<style scoped lang="scss">
// 样式已迁移到 src/styles/explorer.scss
// 这里只保留组件特有的样式覆盖（如果需要）
</style>
